<template>
  <div class="outer">
    <h1>我是Footer的数据{{ count }}</h1>
    <h1>{{ price }}</h1>
    <button @click="increment">点击count+1</button>
    <button @click="incrementN({n:3})">点击count+N</button>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { mapMutations } from "vuex";
export default {
  name: "Footer",
  mounted() {
    // console.log(mapState(['count','price']));
    // console.log(mapState(['count','price']).count);
    // mapMutations(["increment", "incrementN"]).increment.call(this);
  },
  computed: {
    // count(){
    //   return this.$store.state.count
    // },
    // price(){
    //   return this.$store.state.price
    // }
    // ...mapState(['count','price'])
    ...mapState({ count: "count", price: "price" }),
  },
  methods: {
    // increment() {
    //   this.$store.commit("increment");
    // },
    // incrementN(n) {
    //   this.$store.commit("incrementN", { n });
    // },
    ...mapMutations(['increment','incrementN'])
  },
};
</script>

<style scoped>
.outer {
  background: red;
}
</style>